<template>
    <div class="container">
        <div class="pdf_btn" @click="saveHtml">保存</div>
        <Toolbar class="tools" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
        <div class="editor">
            <Editor v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
        </div>
    </div>
</template>

<script>

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p >hello</p>',
            toolbarConfig: {
                excludeKeys: [
                    /* 隐藏哪些菜单 */
                    // 'group-more-style',
                    'blockquote', // 引用
                    'code', // ···更多-行内代码
                    'clearStyle', // ···更多-清除格式
                    // 'todo', // 代办
                    'emotion', // 表情
                    // 'insertTable',// 表格
                    'codeBlock', // 代码块
                ],
            },
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: 'http://127.0.0.1:5611/api/device/loadimg',
                        headers: {
                            // Authorization:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2ODM2NDYwMTUsInVzZXJfbmFtZSI6ImN5Iiwicm9sZV9pZCI6MX0.8cA4JsfMacKcDCfcujip2oCp9ECjFE9tQrzAqz8CrBg"
                        },
                        base64LimitSize: 1024 * 5 * 1024, //5M 以下用base64
                    },
                },
            },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor)
            let token = sessionStorage.getItem('token')
            // let token =
            this.editorConfig.MENU_CONF.uploadImage.headers.Authorization = token
        },
        saveHtml() {

            this.$confirm('保存此次编辑?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {

                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消更新',
                    })
                })
        },
    },
    created() {},
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;

    .pdf_btn {
        float: left;
        width: 60px;
        height: 40px;
        background-color: #0c2052;
        line-height: 40px;
        text-align: center;
        color: #b2e3ff;
        cursor: pointer;
    }

    .tools {
        width: calc(100% - 40px);
        // background-color: red;
    }

    .editor {
        height: 280px;
        overflow: auto;
        height: calc(100% - 40px);
        width: 54%;
        margin-left: 23%;
    }
}
</style>
